<template>
  <div>
    <el-table
      :data="alarmArr"
      style="width: 100%"
    >
      <el-table-column
        type="index"
        width="50"
      >
      </el-table-column>
      <el-table-column
        prop="hash.title"
        label="标题"
        width="100"
      >
      </el-table-column>
      <el-table-column
        prop="hash.content"
        label="内容"
      >
      </el-table-column>

      <el-table-column
        prop="hash.intime"
        label="提醒时间"
        width="150"
      >
      </el-table-column>
      <el-table-column
        prop="hash.readtime"
        label="阅读时间"
        width="150"
      >
      </el-table-column>
      <el-table-column
        label="状态"
        width="50"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.hash.isread=='1'">已读</span><span v-else style="color:#f60">未读</span>
        </template>
      </el-table-column>
      <!-- <el-table-column
        prop="hash.readtime"
        label="阅读时间"
      >
      </el-table-column> -->
      <el-table-column label="操作" width="150">
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="checkmymessage(scope.row)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @current-change="handleCurrentChange"
      :currentPage.sync="pagobj.currentPage3"
      :pageSize="pagobj.pagesize"
      layout="total, prev, pager, next"
      :total="pagobj.total"
      style="margin:20px 0;text-align:center"
    >
    </el-pagination>
    <el-dialog
      title="查看消息"
      :visible.sync="dia1"
      :showClose="false"
      :closeOnClickModal="false"
      width="40%"
    >
      <el-form labelWidth="200px">
        <el-form-item label="标题：" style="width:100%">
          {{alarmData.title}}
        </el-form-item>
        <el-form-item label="内容：" style="width:100%">
          {{alarmData.content}}
        </el-form-item>
        <el-form-item label="提醒时间：" style="width:100%">
          {{alarmData.intime}}
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="closemymessage" type="danger">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dia1: false,
      ts: this.newStore(),
      alarmArr: [],
      alarmData: {},
      pagobj: {
        currentPage3: 1,
        pagesize: 10,
        total: 10,
      },
    };
  },
  created() {
    this.getalarmArr();
  },
  methods: {
    handleCurrentChange() {
      this.getalarmArr();
    },
    closemymessage() {
      this.getalarmArr();
      this.$router.go(0);
      this.dia1 = false;
    },
    getalarmArr() {
      const req = {
        handle: '0D11340FE194B51D624F3AFA15C59A27BE8D98FED80D7D61F6486B1D96ED9F7E',
        start: (this.pagobj.currentPage3 - 1) * this.pagobj.pagesize,
        limit: this.pagobj.pagesize,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.alarmArr = ts.d.data.operation1;
        this.pagobj.total = parseInt(ts.d.data.operation2[0].hash.allrs);
      });
    },
    checkmymessage(item) {
      this.alarmData = {};
      const req = {
        handle: '0D11340FE194B51DF1417E37C987294B86E3F848597A165E1F0C438E24ECDA3C',
        aid: item.hash.aid,

      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.alarmData = ts.d.data.operation1[0].hash;
        this.dia1 = true;
      });
    },
  },
};
</script>

<style>

</style>
